import React, { Component } from 'react';

//导入echarts
var echarts = require('echarts/lib/echarts'); //必须
require('echarts/lib/chart/line'); //图表类型
require('echarts/lib/component/title'); //标题插件

import {setFontSize, filterLineData} from '../../util'
//var markLineSetting = {
//  symbol: 'none',
//  lineStyle: {
//    normal: {
//      opacity: 1,
//      color: '#41C0E4',
//      width: 3,
//      type: 'dashed'
//    }
//  },
//  data: [[
//    {
//      type: 'max',
//      label: {
//        normal: {
//          formatter: '你的排名',
//          textStyle: {
//            fontSize: 28
//          }
//        }
//      }
//    }
//  ]]
//};

class Line extends React.Component {

  constructor(props) {
    super(props)
    this.setPieOption = this.setPieOption.bind(this);
    this.initPie = this.initPie.bind(this)
  }

  initPie() {
    const { data ,userRank} = this.props; //外部传入的data数据
    let myChart = echarts.init(this.refs.lineChart); //初始化echarts
    //我们要定义一个setPieOption函数将data传入option里面
    let options = this.setPieOption(data, userRank);
    //设置options
    myChart.setOption(options)
  }

  componentDidMount() {
    this.initPie()
  }

  componentDidUpdate() {
    this.initPie()
  }

  render() {
    return (
      <div className="echart-react">
        <div ref="lineChart" style={{width: "100%", height: "5.37rem"}}></div>
      </div>
    )
  }

  //一个基本的echarts图表配置函数
  setPieOption(data, userRank) {
    let len = data.length;
    return {
      width: '80%',
      grid:{
        left:'10%',
        top:'24%',
        bottom:20,
        right:40,
        containLabel:true
      },
      title: {
        text:`${data[len - 1].yearInt}年你的排名：${userRank}名`,
        x:'center',
        top: '0%',
        textStyle:{
          color :'#41C0E4',
          fontSize: setFontSize(.3)
        }
      },
      xAxis: {
        data: filterLineData(data,'yearInt'),
        axisLine:{
          show:false
        },
        axisLabel: {
          textStyle: {
            color: '#5c6076',
            fontSize: setFontSize(.24)
          }
        },

      },
      yAxis: {
        ayisLine:{
          show:false
        },
        axisLabel: {
          textStyle: {
            color: '#5c6076',
            fontSize: setFontSize(.24)
          }
        },
        axisLine: {
          lineStyle: {
            color: '#ccc'
          }
        }
      },

      series: [
        {
          type: 'line',
          name:'大学统计图',
          lineWidth:5.2,
          data: filterLineData(data, 'rank'),
          symbol:'circle',
          symbolSize: 20,
          itemStyle:{
            normal:{
              color:'#41C0E4 ',
              label:{
                show:true,
                position:'top',
                textStyle:{
                  color:'#5E5E5E',
                  fontSize: setFontSize(.24)
                },
                formatter:'{c}名'
              }
            }
          }


        },
        //{
        //  type: 'line',
        //  name:'大学统计图',
        //  data:['','',userRank],
        //  symbol:'circle',
        //  symbolSize: 20,
        //  itemStyle:{
        //    normal:{
        //      color:'#41C0E4 ',
        //      label:{
        //        show:true,
        //        position:'top',
        //        textStyle:{
        //          color:'#41C0E4',
        //          fontSize: 26
        //        },
        //        formatter:'{c}名'
        //      },
        //    },
        //  },
        //  //markLine: markLineSetting
        //
        //}
      ]
    }
  }
}
export default Line
